<template>
    <div class="hello">
        <xayah
                v-model="images"
                :urls="urls"
                :id="id"
                :max="5"
                :config="config"
                @callback="callback"
        >
        </xayah>
            <div class="img-width">
                <!-- 调用组件  -->
                <draggable element="div" v-model="list">
                    <div class="img-wrap" v-for="(item, index)  in list">
                        <template v-if="imageType(item) === true">
                            <img :src="item" />
                        </template>
                        <template v-else>
                            <video width="100px" height="100px" controls="controls">
                                <source :src="item" type="video/mp4">
                            </video>
                        </template>
                        <i class="iconfont icon-guanbi" @click="remove(index)"  ></i>
                    </div>
                </draggable>
                <input  type="hidden" id="slider"  name="slider" v-model="list" class="form-control title" placeholder="文件路径">
            </div>
    </div>
</template>

<script>

    let dom = '';
    import iView from 'iview';
    import 'iview/dist/styles/iview.css';
    import draggable from 'vuedraggable'
    export default {
        props: ['tagvalue'],
        name: "image1",
        components: {
            draggable,
        },
        data () {
            return {
                list:this.danamicValue()
            }
        },

        methods: {
            danamicValue(){
                if(this.tagvalue==""){
                    return [];
                }else {
                 let  data=  this.tagvalue.split(',');
                    if(data[0]==''){
                        data.splice(0,1);
                    }
                   return data;
                }
            },
            imageType($value){
                return /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test($value)
            },
            remove(index){
                    this.list.splice(index,1);
            },
            imageHandler() {
                document.getElementById('editorImage').click();
            }

        }

    }
</script>

<style scoped>
    .img-wrap{
        position: relative;
        width: 100px;
        height: 100px;
        float: left;
        margin-left:10px ;
    }
    .img-width{
        width: 900px;
        margin-bottom:10px;

    }
    .img-wrap img{
        width: 100px;
        height: 100px;
    }
    .img-wrap i{
        position: absolute;
        top: -10px;
        right: -10px;
        font-size: 16px;
    }

    @font-face {font-family: "iconfont";
        src: url('//at.alicdn.com/t/font_907053_d8iqipz0i79.eot?t=1541555379118'); /* IE9*/
        src: url('//at.alicdn.com/t/font_907053_d8iqipz0i79.eot?t=1541555379118#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQsAAsAAAAABoQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY+NEmwY21hcAAAAYAAAABLAAABcOjmuuRnbHlmAAABzAAAAHoAAACQGOUPhmhlYWQAAAJIAAAALwAAADYTMA9haGhlYQAAAngAAAAcAAAAJAfeA4NobXR4AAAClAAAAAgAAAAICAAAAGxvY2EAAAKcAAAABgAAAAYASAAAbWF4cAAAAqQAAAAgAAAAIAEPADVuYW1lAAACxAAAAUUAAAJtPlT+fXBvc3QAAAQMAAAAHwAAADDK72J2eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBye73u+j7nhfwNDDHMDQwNQmBEkBwD6/w1heJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISf77v/38YCeSzgEkGRjaGUcADJmWgPHBYQTADIwD8CwxlAHicY2BmYPjfy/yJuZCBm0GdQYOBgZGNgV2MQdyMwVyNQVhMhE1Jn5GdTUnNxJ5RXc3EzEie0dzMSEyEn1GcieHyv+esrIySly8zSrKy/nvOxCejwjd1Kp+KDIhEYjMXAGUvI6n+W8+nIs07dSqvNEzRlCkQDQA1XiN5AAB4nGNgZGBgAGKFz9uPxfPbfGXgZmEAgRscqZsR9P9eFgbmQiCXg4EJJAoAMuUKPwB4nGNgZGBgbvjfwBDDwgACQJKRARUwAQBHCAJrBAAAAAQAAAAAAAAAAEgAAAABAAAAAgApAAMAAAAAAAIAAAAKAAoAAAD/AAAAAAAAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAiZGJkZmBLb00MS8pk4EBABBXApIA') format('woff'),
        url('//at.alicdn.com/t/font_907053_d8iqipz0i79.ttf?t=1541555379118') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('//at.alicdn.com/t/font_907053_d8iqipz0i79.svg?t=1541555379118#iconfont') format('svg'); /* iOS 4.1- */
    }

    .iconfont {
        font-family:"iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-guanbi:before { content: "\e7be"; }
</style>